<!-- 电影封面 -->
<template>
    <div class="wrap" :id="'vid-'+info.vid">
        <div class="container" @click="toDetail">
            <!-- <img :src="showImg?info.coverImg:''"> -->
            <img v-lazy="info.coverImg">
            <!-- <div class="views-wrap">
                <i class="view-count">{{Number(info.views)}}</i>
                <span class="views">
                    <i class="icon iconfont icon-bofang"></i>
                </span>
            </div> -->
            <div class="vip" v-if="info.isVip">
                <i class="icon iconfont icon-VIP1"></i>
            </div>
            <!-- <div class="new" v-if="info.isNew">
                <i class="">يېڭى</i>
            </div> -->
            <div class="title">
                <span>
                    {{info.title}}
                </span>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            showImg: false
        };
    },
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        /* let observer = new IntersectionObserver(
            res => {
                if (res[0].intersectionRatio > 0.8) {
                    this.showImg = true;
                    observer.disconnect();
                }
            },
            {
                root: null,
                threshold: [0, 1],
                rootMargin: "0px 0px 0px 0px"
            }
        );
        let el = document.querySelector("#vid-" + this.info.vid);
        observer.observe(el); */
    },
    methods: {
        toDetail() {
            this.$router.push({
                name: "Player",
                params: { info: this.info },
                query: {
                    vid: this.info.vid,
                    type: this.info.type,
                    sort: this.info.sort
                }
            });
        }
    },
    components: {}
};
</script>
<style lang='scss' scoped>
.wrap {
    text-align: center;
    width: 99%;
    margin: 0 auto;
    .container {
        position: relative;
        margin-top: 6px;
        border-radius: 28px;
        overflow: hidden;
        img {
            border-radius: 28px;
            width: 98%;
            min-height: 190px;
            // height: 320px;
            object-fit: cover;
        }
        .vip {
            position: absolute;
            top: 0;
            left: 1%;
            width: 80px;
            line-height: 50px;
            color: #ebedf0;
            height: 50px;
            background-color: #fe0036;
            font-family: "Franklin Gothic Medium", "Arial Narrow", Arial,
                sans-serif;
            border-radius: 25px 0 10px 0px;
            i {
                font-size: 40px;
            }
        }
        .new {
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            line-height: 56px;
            color: #ebedf0;
            height: 56px;
            background-color: #3dabe8;
            border-radius: 0 0 0 27px;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
                font-size: 32px;
                transform: scaleY(0.8);
            }
        }
        .views-wrap {
            position: absolute;
            bottom: 50px;
            right: 0;
            color: #ffffff;
            font-size: 25px;
            background-color: #000;
            opacity: 0.7;
            height: 50px;
            line-height: 40px;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: space-around;
            // width: 50%;
            border-radius: 20px;
            text-align: right;
            .views {
                i {
                    color: white;
                    font-size: 24px;
                    transform: scale(0.5);
                    display: inline-block;
                    padding: 4px 16px;
                    border: 1px solid white;
                    border-radius: 50%;
                    line-height: 50px;
                }
                // margin-right: 7px;
            }
            .view-count {
                font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun,
                    Arial, "Helvetica Neue", Helvetica;
                display: inline-block;
                margin-left: 10px;
                margin-top: -3px;
            }
        }
        .title {
            direction: rtl;
            text-align: center;
            color: #292a2a;
            font-size: 26px;
            // text-overflow: clip;
            // overflow: hidden;
            // white-space: nowrap;
        }
    }
}
</style>